// import React, { useEffect, useRef } from "react";
// import * as echarts from "echarts";

// function Shuju() {
//   var chartDom = useRef(null)
//   var option;
  
//   useEffect(() => {
//     myChart.setOption({
//   title: {
//     text: 'ECharts 入门示例'
//   },
//   tooltip: {},
//   xAxis: {
//     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
//   },
//   yAxis: {},
//   series: [
//     {
//       name: '销量',
//       type: 'bar',
//       data: [5, 20, 36, 10, 10, 20]
//     }
//   ]
// });
    
//   }, []);
//   var myChart = echarts.init(chartDom);
//     option && myChart.setOption(option);
//   return (
//     <div>
//       <div>
//         <h2>内容发布比</h2>
//         <div ref={chartDom} ></div>
//       </div>
//     </div>
//   );
// }

// export default Shuju;


import React from 'react';
import { Table } from "antd";
function Shuju() {
  const dataSource = [
  {
    key: '1',
    name: '用魔法打败魔法',
    age: 32,
    address: '1233',
  },
  {
    key: '2',
    name: '王多鱼',
    age: 42,
    address: '45678',
  },
  {
    key: '2',
    name: '请叫我小李',
    age: 42,
    address: '45678',
  },
  {
    key: '2',
    name: '橙皮',
    age: 42,
    address: '45678',
  },
  
  {
    key: '2',
    name: 'tmd赛文还在追我',
    age: 42,
    address: '45678',
  },
];
  const columns = [
  {
    title: '排名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '作者',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '内容量',
    dataIndex: 'address',
    key: 'address',
  },
  
];
  return (
    <div className='box'>
      <div className='yi'>
        <h2>舆情分析</h2>
        <div style={{background:'#e7f1fb'}}>
          <h3>访问总人数</h3>
          <h2>12,256</h2>
          <span>较昨天 256+</span>
        </div>
        <div style={{background:'#e7fbe8'}}>
          <h3>内容发布量</h3>
          <h2>11,38</h2>
          <span>较昨天 535+</span>
        </div>
        <div style={{background:'#e7f1fb'}}>
          <h3>评论总量</h3>
          <h2>4,592</h2>
          <span>较昨天 323-</span>
        </div>
        <div style={{background:'#fbe7fb'}}>
          <h3>分享总量</h3>
          <h2>32,256</h2>
          <span>较昨天 123-</span>
        </div>
      </div>
      <div className='er'>
        <h2>内容发布比</h2>
      </div>
      <div className='san'>
        <h2>热门作者榜单</h2>
        
        <Table dataSource={dataSource} columns={columns} pagination={false}/>
      </div>
      <div className='si'>
        <h2>内容时段分</h2>
      </div>
    </div>
  );
}

export default Shuju;